<#include "default/common/head.html" />
<style>
    .pagebox{
        width: 100%;text-align: center;
    }
    .navbar{
        width: 100%;
        height: 38px;
        line-height: 38px;
        border-bottom: #d1f7e2 solid 2px;
        margin-bottom: 40px;
    }
    .nav{
        width: 16%;
        margin-left: 1%;
        margin-right: 1%;
        text-align: center;
        display: inline-block;
        font-size: 1.2em;
        cursor: pointer;
    }
    .selectednav{
        color:#36a968;
        font-family: STSong SimSun NSimSun NSimSun;
        border-bottom: #36a968 solid 2px;
    }
    p{
        color: #414141;
        font-size: 16px;
        font-weight: 400;
        line-height: 28px;
        text-indent: 32px;
        margin-top: 20px;
    }

</style>
<div class="of-banner">
    <div class="layui-carousel" id="join">
        <div carousel-item="" style="border-width:0px;">
            <@of.ad site_id=site.site_id edition="join">
            <#list ad as data >
            <div style="border-width:0px;">
                <a href="${data.ad_jump_url!'javascript:;'}"  style="border-width:0px;">
                <img
                        src="${webroot}${data.ad_image_url}"
                        alt="${data.ad_name}" style="width: 100%;border-width:0px;"></a>
            </div>
            </#list>
            </@of.ad>
        </div>
    </div>
</div>


<div class="pagebox">
    <div style="width: 62.5%;display: inline-block;text-align: left;margin-top: 4%">
        <div class="navbar">
            <@of.column site_id=site.site_id parent_id=columns.up_column_id>
            <#if column?? && (column?size>0)  >
            <#list column as child >
            <a href="${child.column_english}.html">
                <h2 style="font-size: 1.2em" class="nav <#if child.column_english == 'join_donors'>selectednav</#if>">
                    ${child.column_name}
                </h2>
            </a>
            </#list>
            </#if>
            </@of.column>
        </div>
        <div style="padding: 20px">
        <!-- start -->
        <@of.content_list site_id = site.site_id column_id = columns.column_id>
        <#list content_list as data >
        <div class="join">
            <img src="${webroot}/${data.thumbnail}" class="joinimg">
            <div class="jointxt">${data.title_name}</div>
            <a href="${data.url}" target="_blank" class="joinbtn">
                立即加入
            </a>
        </div>
        <#if data_index%3==2><br /></#if>
        </#list>
        <@of.page />
        </@of.content_list>
        <!-- end -->

        </div>

    </div>

</div>

<script>
    layui.use(['carousel', 'element'], function () {
        var carousel = layui.carousel;
        var element = layui.element;
        //图片轮播
        carousel.render({
            elem: '#join'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            , height: '100%'
            , autoplay: true
            , full: false
            , interval: 3000
        });
    });
</script>
<#include "default/common/footer.html" />